import { useState } from 'react';
import { Button, Icon, Modal } from '@fomantic-react/main';

export default () => {
  const [activeA, setActiveA] = useState(false);
  const [activeB, setActiveB] = useState(false);
  const handleClick = () => {
    setActiveA(false);
    setActiveB(false);
  };

  return (
    <>
      <Button onClick={() => setActiveA(!activeA)}>One</Button>
      <Button onClick={() => setActiveB(!activeB)}>Two</Button>

      <Modal.Group onClick={handleClick} inverted>
        <Modal active={activeA} inverted>
          <Modal.Header>Header</Modal.Header>
          <Modal.Content image>
            <div className="ui medium image">
              <img src="/images/rachel.png" />
            </div>
            <Modal.Description>
              <div className="ui header">Default Profile Image</div>
              <p>
                We‘ve grabbed the following image from the{' '}
                <a href="https://www.gravatar.com" target="_blank" rel="noreferrer">
                  gravatar
                </a>{' '}
                image associated with your registered e-mail address.
              </p>
              <p>Is it okay to use this photo?</p>
            </Modal.Description>
          </Modal.Content>
          <Modal.Actions>
            <Button color="black">Nope</Button>
            <Button color="positive" icon>
              Yep, that‘s me <Icon name="checkmark" />
            </Button>
          </Modal.Actions>
        </Modal>
        <Modal active={activeB}>
          <Modal.Header basic>Header</Modal.Header>
          <Modal.Content centered>
            <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
          </Modal.Content>
          <Modal.Actions basic>
            <Button color="red" basic inverted>
              <Icon name="remove" />
              No
            </Button>
            <Button color="green" inverted>
              <Icon name="checkmark" />
              Yes
            </Button>
          </Modal.Actions>
        </Modal>
      </Modal.Group>
    </>
  );
};
